<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>应用jQuery的slideDown和fadeOut等方法设计下拉菜单</title>
<!-- 网站样式表-->
<link href="css/global.css" rel="stylesheet" type="text/css" media="screen" />
<!-- 网站样式表 END-->
<script type="text/javascript" language="javascript"  src="js/jquery.js"></script>
<script type="text/javascript" >
$(document).ready(function(){	
	headmenu();//头部导航链接样
});

function headmenu(){
	$(".menu>li:drop").hover(function(){
		//鼠标移动
		$(this).addClass("index");						   
		$(".droplist").slideDown(200);
	},function(){
		//鼠标离开
		$(this).removeClass("index");
		$(".droplist").fadeOut(200);
	});	
	
	//顶部菜单弹出后,鼠标移动样式替换
	$(".droplist>li").hover(function(){
		//鼠标移动							 
		$(this).addClass("hover");						   
	},function(){
		//鼠标离开
		$(this).removeClass();
	});	
}
</script>

</head>

<body>
<div id="header">
  <div class="topmenu">
    <ul class="menu">
      <li class="drop"><a href="" target="_blank">我的易购</a>
        <ul class="droplist">
          <li><a href="#">订单管理</a></li>
          <li><a href="#">编辑个人信息</a></li>
          <li><a href="#">修改登录密码</a></li>
          <li><a href="#">收货地址管理</a></li>
          <li><a href="#">我的收藏夹</a></li>
          <li><a href="#">商品咨询</a></li>
          <li><a href="#">意见建议</a></li>
        </ul>
      </li>
    </ul>        
  </div>
</div>
</body>
</html>
